<template>
    <div class = "HeartCourse">
        <h3 class = "top-title clearfix">
            <span class = "left">文摘电台</span>
            <span class = "right" @click = "toRadioStationList">更多>></span>
        </h3>
        <div class="list">
            <HeartCourseCard v-for = "v in 2" :key = "v" url = "/pages/RadioStationDetail/main"/>
        </div>
        <div class = "delimiter"></div>
        <h3 class = "top-title clearfix">
            <span class = "left">聆听经典</span>
            <span class = "right" @click = "toListenClassicList">更多>></span>
        </h3>
        <div class="list">
            <ul class = "container clearfix">
                <li v-for = "v in 4" :key = "v" @click = "toListenClassicDetail">
                    <img 
                    v-if = "host" 
                    mode = "aspectFill"
                    :src="host + '/images/radio_station_1.png'" alt=""
                    >
                    <p class = "text-ellipses">课程标题课程标题课程标题课程标题课程标题课程标题</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import HeartCourseCard from "../../components/CourseCard";
import HOST from "../../config/host";
export default {

    data(){
        return {
            host: HOST
        }
    },
    methods: {
        toRadioStationList(){
            wx.navigateTo({ url: '/pages/RadioStationList/main' });
        },
        toListenClassicList(){
            wx.navigateTo({ url: '/pages/ListenClassicList/main' });
        },
        toListenClassicDetail(){
            wx.navigateTo({ url: '/pages/ListenClassicDetail/main' });
        }
    },
    components: {
        HeartCourseCard
    }
}
</script>
<style lang = "scss" scoped>
    @import "index.scss";
</style>
